<!DOCTYPE html>
<html lang="en">
<head>
    <title>商品页面</title>
    <meta charset="UTF-8">
    <title>goods</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/vue/vue.min.js"></script>
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/laypage/laypage.js" charset="utf-8"></script>
    <script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>

<div id="app" class="container">

    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="goodsname">商品名称</label>
            <input type="text" class="form-control" id="goodsname" placeholder="商品名称">
        </div>
        <div class="form-group">
            <label class="sr-only" for="goodsId">商品属性</label>
            <input type="text" class="form-control" id="goodsId" placeholder="商品属性">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询商品</button>
        <button type="button" id="addUserBtn" class="btn btn-danger">添加商品</button>
    </form>



    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>序号</td>
                <td>商品名称</td>
                <td>商品图片</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{index+1}}</td>
                <td>{{item.goodsname}}</td>
                <td>{{item.goodsPhoto}}</td>
                <td><a href="#" @click="editEvent(item.id)">编辑</a> <a href="#" @click="delEvent(item.id)">删除</a></td>
            </tr>
            </tbody>
        </table>
        <div id="pagenav"></div>
    </div>
</div>
<script>
    //实例化Vue
   var app=new Vue(
       {
           el:'#app',
           data:{
               result:[]
           }
       }
   );
   var getGoodsPageList=function(curr){
       $.ajax({
           type:"GET",
           dataType :"json",
           url:"/goods/allGoods",
           data:{
               pageNum:curr||1,
               pageSize:6,
               goodsName:$("#goodsname").val()
           },
           success:function(msg){
               app.result=msg.result,//容器。值支持id名，原生dom对象，jquery对象
               laypage({
                   cont:'pagenav',
                   pages:msg.totalPage,//总页数
                   first:true,
                   curr:curr||1,//当前页
                   jump:function(obj,first){
                       //触发分页后的回调
                       if (!first){
                           //点击跳转页面触发函数自身，并传递当前页：obj.curr
                           getGoodsPageList(obj.curr);
                       }
                   }
               });
           }
       });
   }
    getGoodsPageList();
   //查询商品
    $('#findUser').on('click',function(){
        getGoodsPageList();
    })
    //增加商品事件
    $('#addUserBtn').on('click',function(){
        layer.open({
            type:2,
            title:'添加商品',
            fix:false,
            shadeClose:true,
            area:['1100px','600px'],
            content:'goods_add.html',
            end:function(){
                getGoodsPageList();
            }
        });
    });

    /*编辑商品*/
    var editEvent=function(id){
        layer.open({
            type:2,
            title:'编辑商品',
            fix:false,
            maxmin:true,
            shadeClose:true,
            area:['1100px','600px'],
            content:'/goods/find?id='+id,//传递id的值
            end:function(){
                getGoodsPageList();
            }
        });
    }
   //删除商品
    var delEvent=function(id){
        //询问框
        layer.confirm('您确定要删除吗？',{btn:['是','否']},
            function(){//是
                $.ajax({
                    type:"GET",
                    dataType:"json",
                    url:"/goods/del",
                    data:{
                        id:id
                    },
                    success:function(msg){
                        getGoodsPageList();
                        layer.msg('已经成功删除该商品！'+id,{icon:5});
                    }
                });

            },function(){
                //否
            }
        );


    }
</script>
</body>
</html>